<template>
	<view class="content">
		<!-- navbar部分 -->
		<u-navbar
			@leftClick="backHome"
			:autoBack="false"
			:bgColor="'rgba(15, 23, 79,1)'"
			:leftIconColor="'rgba(255,255,255,1)'"
			leftText="任务详情"
			style="margin-bottom: 108rpx;"
		>
		</u-navbar>
		<!-- 内容区 -->
		<view class="taskList">
			<!-- 展示区 -->
			<view class="SelectTask">
				<view class="SelectTask1">
					<!-- 站点 -->
					<view class="SelectTask1-1">
						<text class="SelectTaskText">站点名称</text>
						<text class="reveal">{{site_name}}</text>
					
					</view>
					
					<!-- 工艺体 -->
					<view class="SelectTask1-2">
						<text class="SelectTaskText">工艺体名称</text>
						<text class="reveal">{{process_name}}</text>
						
					</view>
					
					<!-- 机器人名称 -->
					<view class="SelectTask1-3">
						<text class="SelectTaskText">机器人名称</text>
						<text class="reveal">{{robot_name}}</text>
					</view>
					
					<!-- 任务编码 -->
					<view class="SelectTask1-4">
						<text class="SelectTaskText">任务编码</text>
						<text class="reveal">{{task_num}}</text>
					</view>
					
					<!-- 任务名称 -->
					<view class="SelectTask1-5">
						<text class="SelectTaskText">任务名称</text>
						<text class="reveal">{{task_name}}</text>
					</view>
					
					<!-- 执行时间 -->
					<view class="SelectTask1-3">
						<text class="SelectTaskText">执行时间(H)</text>
						<text class="reveal">{{execution_time}}</text>
					</view>
					
					<!-- 停留时间 -->
					<view class="SelectTask1-5">
						<text class="SelectTaskText">停留时间(m)</text>
						<text class="reveal">{{residence_time}}</text>
					</view>
				</view>
			</view>
			<!-- 巡检设置 -->
			<view class="moveTask">
				<view class="moveTaskbox">
					<!-- 表格 -->
					<view class="xjdxq">
						<!-- 标题 -->
						<view class="xjdxqTitle">
							<text style="margin-left: 34rpx;">巡检点详情</text>
						</view>
						<view style="height: 262rpx;overflow: auto;">
							<table class="table">
							   <!-- 表头行 -->
							   <thead>
							     <tr>
							       <th align="center" width="80">巡检点编码</th>
							       <th align="center" width="95">巡检点名称</th>
							       <th align="center" width="110">巡检点距离(m)</th>
							     </tr>
							   </thead>
							   <!-- 表格数据行 -->
							   <tbody v-if="xjPinot.length > 0">
							     <tr v-for="(item,index) in xjPinot" :key="index">
							       <td align="center">{{item.position_num}}</td>
							       <td align="center">{{item.position_name}}</td>
							       <td align="center">{{item.position_dist}}</td>
							     </tr>
							   </tbody>
								 <tbody v-else>
								   <tr>
								     <td colspan="4" style="text-align: center;padding-top: 80rpx;background-color: #fff;">暂无数据</td>
								   </tr>
								 </tbody>
							 </table>
						</view>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {TaskDetails} from '@/api/addTask/addTask.js'
	import cookie from '../../../cookie';
	
	export default {
		data() {
			return {
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				id:cookie.get('zdxjtask_id'),
				
				site_name:'无' , //站点名称
				process_name:'无' , //工艺体名
				robot_name:'无' , //机器人名称
				task_num:'无' , //任务编码
				task_name:'无' ,//任务名称
				execution_time:'无', //执行时间
				residence_time:'无', //停留时间
				//巡检点详情
				xjPinot:[]
			};
		},
		onShow() {
			this.rwxq() //任务详情
		},
		methods:{
			//任务详情
			rwxq(){
				TaskDetails(this.token,this.secretKey,this.id).then( Response =>{
					if(Response.data.taskdetail != undefined && Response.data.taskdetail != null){
						this.site_name = Response.data.taskdetail.site_name == null? '无':Response.data.taskdetail.site_name
						this.process_name = Response.data.taskdetail.process_name == null? '无':Response.data.taskdetail.process_name
						this.robot_name = Response.data.taskdetail.robot_name == null ? '无':Response.data.taskdetail.robot_name
						this.task_num = Response.data.taskdetail.task_num == null ? '无':Response.data.taskdetail.task_num
						this.task_name = Response.data.taskdetail.task_name == null ? '无':Response.data.taskdetail.task_name
						this.execution_time = Response.data.taskdetail.execution_time == null ? '无':Response.data.taskdetail.execution_time
						this.residence_time = Response.data.taskdetail.residence_time == null ? '无':Response.data.taskdetail.residence_time
					}else{
						this.site_name = '无'
						this.process_name = '无'
						this.robot_name = '无'
						this.task_num = '无'
						this.task_name = '无'
						this.execution_time = '无'
						this.residence_time = '无'
					}
					//巡检点详情
					this.xjPinot = Response.data.pointlist
					
				})
			},
			backHome(){
				uni.reLaunch({
					url:'/pages/common/Auto/index'
				})
			},
		}
	}
</script>

<style lang="scss">
*{
		margin: 0;
		padding: 0;
	}
	page{
		 background: #F5F5F5;
	}
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
		margin-top: 60rpx;
	}
	.taskList{
		width: 721rpx;
		height: 1028rpx;
		background: #F7F7F7;
		// background-color:skyblue;
	}
	
	.SelectTask{
		width: 100%;
		height: 641rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: cadetblue;
	}
	.SelectTask1{
		width: 487rpx;
		height: 100%;
		// background-color: cornsilk;
	}
	
	//站点
	.SelectTask1-1{
		width: 100%;
    height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 45rpx;
		// background-color: orchid;
	}
	
	//共用
	.reveal{
		width: 340rpx;
		height: 62rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	//共用
	.SelectTaskText{
		width: 160rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		margin-right: 19rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		// background-color: cadetblue;
	}
	
	//工艺体
	.SelectTask1-2{
		width: 100%;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 19rpx;
		// background-color: orchid;
	}
	
	
	//机器人
	.SelectTask1-3{
		width: 100%;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 19rpx;
		// background-color: orchid;
	}
	
	
	//任务编码
	.SelectTask1-4{
		width: 100%;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 19rpx;
		// background-color: orchid;
	}

	//任务名称
	.SelectTask1-5{
		width: 100%;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 19rpx;
		// background-color: orchid;
	}
	
	//备注
	.SelectTask1-6{
		width: 100%;
		height: 114rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 19rpx;
		// background-color: orchid;
	}
	.SelectTask1-6 /deep/ .uni-easyinput__content-textarea{
		width: 320rpx;
		height: 114rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		z-index: 99;
	}
	
	.moveTask{
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-top: 50rpx;
		// background-color: cornsilk;
	}
	
	.xjdxq{
		width: 560rpx;
		height: 326rpx;
		background:#ffffff;
		border-radius: 10rpx;
		margin-top: 40rpx;
		// background-color: #3C4587;
	}
	.xjdxqTitle{
		width: 100%;
		height: 68rpx;
		background: #E8E9EF;
	  border-radius: 10rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
		// margin-bottom: 10rpx;
	}
	.table thead th {
	   background: #FFFFFF;
	    position: sticky;
	    top: 0;
	    z-index: 1;
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			height: 58rpx;
	}
	.table tbody tr {
		height: 58rpx;
		border-radius: 10rpx;
		font-size: 23rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}
	.table tbody tr:nth-child(odd) {
	    background: #f1f4fe;
	}
	.table th,
	.table td {
	  border: none;
	}
	
	.table {
	  border-collapse: collapse;
	  border-spacing: 0;
	}
	
	.moveTaskBtn{
		width: 560rpx;
		margin-top: 56rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: cadetblue;
	}
	.moveTaskBtn1{
		width: 220rpx;
		height: 72rpx;
		background: #E5E5E5;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(165,165,165,0.5);
		border-radius: 36rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.moveTaskBtn2{
		width: 220rpx;
		height: 72rpx;
		background: linear-gradient(-90deg, #0F174F, #3C4587);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(22,33,135,0.5);
		border-radius: 36rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.moveTaskBtn /deep/ uni-button:after{
		border: none;
	}
	
</style>
